<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>生产管理</el-breadcrumb-item>
      <el-breadcrumb-item>生产工单</el-breadcrumb-item>
      <el-breadcrumb-item>工单详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 基础信息 -->
    <el-card class="mt-2">
      <h3>基础信息</h3>
      <el-row :gutter="20">
        <el-col :span="8">工单状态: <el-tag type="success">待下发</el-tag></el-col>
        <el-col :span="8">工单编号: GD20231002101</el-col>
        <el-col :span="8">客户名称: 广汇商贸</el-col>
        <el-col :span="8">销售单号: PO20170725022</el-col>
        <el-col :span="8">优先级: <el-tag type="danger">紧急</el-tag></el-col>
        <el-col :span="8">创建人: 林数儿</el-col>
        <el-col :span="8">创建时间: 2020/09/01 10:40</el-col>
        <el-col :span="8">最后更新时间: 2020/09/01 10:40</el-col>
      </el-row>
    </el-card>

    <!-- 产品信息 -->
    <el-card class="mt-2">
      <h3>产品信息</h3>
      <el-row :gutter="20">
        <el-col :span="8">产品名: 手表</el-col>
        <el-col :span="8">产品编码: GB840-012</el-col>
        <el-col :span="8">产品类型: 半成品</el-col>
        <el-col :span="8">产品分类: 塑料制品</el-col>
        <el-col :span="8">规格: 40mm</el-col>
        <el-col :span="8">计划产量: 10</el-col>
        <el-col :span="8">车间: 组装车间</el-col>
        <el-col :span="8">生产线: 机械加工生产线A</el-col>
        <el-col :span="8">工艺路线: 焊接加工通用工艺</el-col>
        <el-col :span="8">计划开始日期: 2020/09/01</el-col>
        <el-col :span="8">计划结束日期: 2020/09/03</el-col>
      </el-row>
    </el-card>



<!--      <el-tabs v-model="activeTab" @tab-click="handleTabClick">-->
<!--        <el-tab-pane label="工序任务" name="task"></el-tab-pane>-->
<!--        <el-tab-pane label="批次信息" name="batch"></el-tab-pane>-->
<!--        <el-tab-pane label="物料信息" name="material"></el-tab-pane>-->
<!--        <el-tab-pane label="报工记录" name="report"></el-tab-pane>-->
<!--        <el-tab-pane label="质检记录" name="quality"></el-tab-pane>-->
<!--        <el-tab-pane label="生产日志" name="log"></el-tab-pane>-->
<!--      </el-tabs>-->

      <div v-if="activeTab === 'task'">
        <!-- 工序任务内容 -->
      </div>
      <div v-if="activeTab === 'batch'">
        <!-- 批次信息内容 -->
      </div>
      <div v-if="activeTab === 'material'">
        <!-- 物料信息内容 -->
      </div>
      <div v-if="activeTab === 'report'">
        <!-- 报工记录内容 -->
      </div>
      <div v-if="activeTab === 'quality'">
        <!-- 质检记录内容 -->
      </div>
      <div v-if="activeTab === 'log'">
        <!-- 生产日志内容 -->
      </div>



    <!-- 工序任务 -->
    <el-card class="mt-2">
      <h3>工序任务</h3>
      <el-table :data="tasks" style="width: 100%">
        <el-table-column prop="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="taskOrder" label="工序任务单"></el-table-column>
        <el-table-column prop="status" label="任务状态"></el-table-column>
        <el-table-column prop="batchNumber" label="生产批次"></el-table-column>
        <el-table-column prop="processName" label="工序名称"></el-table-column>
        <el-table-column prop="plannedQuantity" label="计划生产数量"></el-table-column>
        <el-table-column prop="completedQuantity" label="已生产数量"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="完成时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="saveOrder">生产执行</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <el-pagination
      class="mt-2"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalTasks">
    </el-pagination>

    <!-- 操作按钮 -->
<!--    <div class="bottom-buttons">-->
<!--      <el-button @click="cancel">取消</el-button>-->
<!--      <el-button type="primary" @click="printOrder">打印</el-button>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'task', // 默认选中的标签
      currentPage: 1,
      pageSize: 10,
      totalTasks: 6,
      tasks: [
        { index: 1, taskOrder: 'GX2023100212', status: '未开始', batchNumber: 'GD2023100212-001', processName: '激光刻标', plannedQuantity: 6, completedQuantity: 0, startTime: '2020-03-09', endTime: '2020-03-19' },
        { index: 2, taskOrder: 'GX2023100212', status: '未开始', batchNumber: 'GD2023100212-001', processName: '激光刻标', plannedQuantity: 6, completedQuantity: 0, startTime: '2017-09-09', endTime: '2021-05-03' },
        { index: 3, taskOrder: 'GX2023100212', status: '未开始', batchNumber: 'GD2023100212-001', processName: '激光刻标', plannedQuantity: 6, completedQuantity: 0, startTime: '2019-01-29', endTime: '2023-12-05' },
        { index: 4, taskOrder: 'GX2023100212', status: '未开始', batchNumber: 'GD2023100212-001', processName: '激光刻标', plannedQuantity: 6, completedQuantity: 0, startTime: '2021-07-19', endTime: '2022-11-29' },
        { index: 5, taskOrder: 'GX2023100212', status: '未开始', batchNumber: 'GD2023100212-001', processName: '激光刻标', plannedQuantity: 6, completedQuantity: 0, startTime: '2018-11-10', endTime: '2022-10-06' },
        { index: 6, taskOrder: 'GX2023100212', status: '未开始', batchNumber: 'GD2023100212-001', processName: '激光刻标', plannedQuantity: 6, completedQuantity: 0, startTime: '2012-12-02', endTime: '2020-06-09' },
      ]
    };
  },
  methods: {
    handleTabClick(tab) {
      console.log('Tab clicked:', tab.name);
    },
   //返回上一页
    cancel() {
      this.$router.push('/aff');
    },
    saveOrder() {
      location.href = '/aff'   // 跳转到生产执行页面
    },
    printOrder() {
      console.log('打印工单');
    },
    handleSizeChange(size) {
      console.log(`每页 ${size} 条`);
    },
    handleCurrentChange(page) {
      console.log(`当前页: ${page}`);
    }
  }
};
</script>

<style>
.mt-2 {
  margin-top: 20px;
}
.bottom-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
